<script setup>
import { StickyNote2Outlined, EventNoteRound } from "@vicons/material";
import { computed } from "vue";
import { useThemeStore } from "@/stores/themeStore";
import { storeToRefs } from "pinia";

import { fromNow } from "@/utils/dayutil";

// 自定义的属性（编号，类型（1：笔记，2：小记），标题，世间）
const props = defineProps(["id", "type", "title", "time"]);

// 主题共享的资源对象
const themeStore = useThemeStore();

// 是否为暗系主题
const { isDarkTheme } = storeToRefs(themeStore);

// 图标属性
const iconAttr = computed(() => {
    return props.type === 1
        ? {
              color: "#18a058",
              component: StickyNote2Outlined,
          }
        : {
              color: "#2080f0",
              component: EventNoteRound,
          };
});
</script>

<template>
    <n-card
        hoverable
        embedded
        size="small"
        :bordered="isDarkTheme"
    >
        <n-space
            align="center"
            :wrap-item="false"
        >
            <!-- 文件图标 -->
            <n-icon
                :size="32"
                v-bind="iconAttr"
            ></n-icon>
            <!-- 文件描述 -->
            <div>
                <n-p class="card-title">{{ title }}</n-p>
                <n-p
                    depth="3"
                    class="card-title"
                >
                    {{ fromNow(time) }}
                </n-p>
            </div>
        </n-space>
    </n-card>
</template>

<style scoped>
p.n-p.card-title {
    margin: 5px;
}

div.n-card {
    cursor: pointer;
}
</style>